<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			*{
					padding: 0;
					margin: 0;
				}
				li{
					list-style: none;
				}
				a{
					text-decoration: none;
				}
				img{
					border:0;
				}
				input{
					outline: none;
				}
			.title{width:375px;height:45px;background:#00b38a;text-align: center;
			line-height:45px;color: white;border-top: 1px solid #007d61;box-sizing: border-box;font-size:18px;}
			.login{width:375px;height:43px;display: flex;justify-content: space-between;
			box-sizing: border-box;padding:0 16px;align-items: center;color: #555555;font-size:12px;}
		    .login .b{width:84px;height: 30px;text-align: center;line-height: 30px;
		      color:#00b38a;background:#f5f5f5;border-radius:20px;}
		    .main{width:375px;}
		    .main .box1{width:100%;box-sizing: border-box;padding:0 14px;}
		    .main .box1 .box1li{padding:20px 0 12px 0;width: 100%;border-top:1px solid #e8e8e8;display:flex;justify-content: space-between;align-items: center;}
		    .main .left,.main .right{display:inline-flex;align-items: center;}
		    .main .left .leftinfo{flex-grow: 1;}
		    .main .left .leftinfo h2{font-size:16px;margin-bottom: 12px;}
		    .main .left .leftinfo h3{font-size:12px;margin-bottom: 12px;color: #333333;font-weight: 500;}
		    .main .left .leftinfo h4{font-size:7px;color: #888888;font-weight: 100;}
		    .main .left .leftlogo{width:60px;margin-right: 12px;}
		    .main .left img{width:60px;height:21px;}
		    .main .right{color: #00b38a;}
		    .footer{width: 375px;height: 45px;position:absolute;bottom:0;background: #f6f6f6;}
		    .footer ul{width:100%;height:100%;display: flex;}
		    .footer ul li{width:125px;height:100%;text-align: center;line-height: 45px;color: #c3cfcc;}
		    .footer ul li:first-child{background: #e7f3f0;color: #00B38A;}
		    .footer ul li img{width:17px;height:17px;vertical-align: middle;margin-top: -4px;margin-right: 2px;}
		    .download {width: 375px;height:66px;position:absolute;bottom:45px;}
		    .download ul{width: 100%;height: 100%;background: black;opacity: 0.8;
		       display: flex;justify-content: space-between;padding:12px 9px;align-items: center;box-sizing: border-box;}
		    .download ul li:nth-child(1) img{width:42px;height:42px;}
		     .download ul li img{vertical-align: middle;}
		    .download ul li:nth-child(4) img{width:98px;height:36px;}
		     .download ul li div{color: white;}
		     .download ul .font div:nth-child(1){font-size:14px;}
		     .download ul .font div:last-child{font-size:10px;font-weight: 100;}
		     .download ul .lg{color: white;font-size: 32px;}
		</style>
	</head>
	<body>
		<div class="boss">
			<div class="title">
				拉勾网
			</div>
			<div class="login">
				<div class="a">10秒钟定制职位</div>
				<div class="b">去登录</div>
			</div>
			<div class="main">
				<ul class="box1">
					<li class="box1li">
						<div class="left">
						<div class="leftlogo"><img src="img/拉钩网_03.jpg"/></div>
						<div class="leftinfo">
							<h2>八分量</h2>
							<h3>后端开发实习生[北京]</h3>
							<h4>今天21:51</h4>
						</div>
						</div>
						<div class="right">6K-9K</div>
					</li>
					
					<li class="box1li">
						<div class="left">
						<div class="leftlogo"><img src="img/拉钩网_03.jpg"/></div>
						<div class="leftinfo">
							<h2>八分量</h2>
							<h3>后端开发实习生[北京]</h3>
							<h4>今天21:51</h4>
						</div>
						</div>
						<div class="right">6K-9K</div>
					</li>
					
					<li class="box1li">
						<div class="left">
						<div class="leftlogo"><img src="img/拉钩网_03.jpg"/></div>
						<div class="leftinfo">
							<h2>八分量</h2>
							<h3>后端开发实习生[北京]</h3>
							<h4>今天21:51</h4>
						</div>
						</div>
						<div class="right">6K-9K</div>
					</li>
					
					<li class="box1li">
						<div class="left">
						<div class="leftlogo"><img src="img/拉钩网_03.jpg"/></div>
						<div class="leftinfo">
							<h2>八分量</h2>
							<h3>后端开发实习生[北京]</h3>
							<h4>今天21:51</h4>
						</div>
						</div>
						<div class="right">6K-9K</div>
					</li>
					
					<li class="box1li">
						<div class="left">
						<div class="leftlogo"><img src="img/拉钩网_03.jpg"/></div>
						<div class="leftinfo">
							<h2>八分量</h2>
							<h3>后端开发实习生[北京]</h3>
							<h4>今天21:51</h4>
						</div>
						</div>
						<div class="right">6K-9K</div>
					</li>
				</ul>
			</div>
			<div class="footer">
				<ul>
					<li><img src="img/拉钩网footer03_03.jpg"/>职位</li>
					<li><img src="img/拉钩网footer03_05.jpg"/>搜索</li>
					<li><img src="img/拉钩网footer03_05.jpg"/>我的</li>
				</ul>
			</div>
			<div class="download">
				<ul>
					<li><img src="img/拉钩网logo_03.jpg"/></li>
					<li class="lg">拉勾</li>
					<li class="font">
						<div>机会很多 挑满意的</div>
						<div>手机投简历，在线聊offer</div>
					</li>
					<li><img src="img/拉钩网logo_05.jpg"/></li>
				</ul>
			</div>
		</div>
	</body>
</html>
